import {Shape, Graph, Node} from '@antv/x6'

const circle = {
    r: 4,
    magnet: true,
    stroke: '#5F95FF',
    strokeWidth: 1,
    fill: '#fff',
    style: {
        visibility: 'hidden',
    },
}

const groups = {
    top: {
        position: 'top',
        attrs: {circle},
    },
    right: {
        position: 'right',
        attrs: {circle},
    },
    bottom: {
        position: 'bottom',
        attrs: {circle},
    },
    left: {
        position: 'left',
        attrs: {circle},
    },
}

const ports = {
    groups,
    items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' },
    ],
}

Graph.registerNode(
    'custom-rect',
    {
        inherit: 'rect',
        width: 66,
        height: 36,
        attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
        },
        ports: { ...ports },
    },
    true,
)

Graph.registerNode(
    'custom-polygon',
    {
        inherit: 'polygon',
        width: 66,
        height: 36,
        attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
        },
        ports: {
            ...ports,
            items: [
                {
                    group: 'top',
                },
                {
                    group: 'bottom',
                },
            ],
        },
    },
    true,
)

Graph.registerNode(
    'custom-circle',
    {
        inherit: 'circle',
        width: 45,
        height: 45,
        attrs: {
            body: {
                strokeWidth: 1,
                stroke: '#5F95FF',
                fill: '#EFF4FF',
            },
            text: {
                fontSize: 12,
                fill: '#262626',
            },
        },
        ports: { ...ports },
    },
    true,
)

Graph.registerNode(
    'custom-image',
    {
        inherit: 'rect',
        width: 52,
        height: 52,
        markup: [
            {
                tagName: 'rect',
                selector: 'body',
            },
            {
                tagName: 'image',
            },
            {
                tagName: 'text',
                selector: 'label',
            },
        ],
        attrs: {
            body: {
                stroke: '#5F95FF',
                fill: '#5F95FF',
            },
            image: {
                width: 26,
                height: 26,
                refX: 13,
                refY: 16,
            },
            label: {
                refX: 3,
                refY: 2,
                textAnchor: 'left',
                textVerticalAnchor: 'top',
                fontSize: 12,
                fill: '#fff',
            },
        },
        ports: { ...ports },
    },
    true,
)

let edge = new Shape.Edge({
    attrs: {
        line: {
            stroke: '#A2B1C3',
            strokeWidth: 2,
            targetMarker: {
                name: 'block',
                width: 12,
                height: 8,
            },
        },
    },
    zIndex: 0,
})

let nodes = [
    new Node.create({
        shape: 'custom-rect',
        label: '开始',
        data: {
            customerType: 0
        },
        attrs: {
            body: {
                rx: 20,
                ry: 26,
            },
        }
    }),
    new Node.create({
        shape: 'custom-rect',
        label: '过程',
    }),
    new Node.create({
        shape: 'custom-rect',
        attrs: {
            body: {
                rx: 6,
                ry: 6,
            },
        },
        label: '可选过程',
    }),
    new Node.create({
        shape: 'custom-polygon',
        attrs: {
            body: {
                refPoints: '0,10 10,0 20,10 10,20',
            },
        },
        label: '决策',
    }),
    new Node.create({
        shape: 'custom-polygon',
        attrs: {
            body: {
                refPoints: '10,0 40,0 30,20 0,20',
            },
        },
        label: '数据',
    }),
    new Node.create({
        shape: 'custom-circle',
        label: '连接',
    })
]

const FactoryNode = {
    nodes,
    edge
}

export default FactoryNode